<template>
  <div class="waterSupply">
    <TitleColumn name="钱仓圩来水预报" />
    <div class="content">
      <vue3ScrollSeamless class="warnScrollWrap" :classOptions="{ step: 0.0003 }" :dataList="state.statisticsData">
        <ul class="list">
          <li class="listItem" v-for="(item, index) in state.statisticsData" :key="index">
            <div class="left">
              <strong>09.1{{item}}</strong>
            </div>
            <div class="right">
              <div class="dataListItem1">
                <p>预报来水量</p>
                <Percentage :num="20" />
                <h3>655.06百万m³</h3>
              </div>
              <div class="dataListItem2">
                <p>多年平均</p>
                <Percentage :num="70" />
                <h3>121.06百万m³</h3>
              </div>
            </div>
          </li>
        </ul>
      </vue3ScrollSeamless>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import TitleColumn from '@/components/TitleColumn';
  import Percentage from './Percentage.vue';
  import { vue3ScrollSeamless } from "vue3-scroll-seamless";

  defineOptions({ name: 'WaterSupply' });

  const state = reactive({
    statisticsData: [1,2,3,4,5],
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .waterSupply {
    width: 100%;
    height: 100%;
    .content {
      width: 100%;
      height: calc(100% - 28px);
      position: relative;
      overflow: hidden;
      background: #02123433;
      backdrop-filter: blur(10px);
      padding: 0 0px 0 10px;
      .warnScrollWrap {
         width: 100%;
        height: 100%;
        overflow: hidden;
      }
      ul.list {
        display: flex;
        flex-direction: column;
        li.listItem {
          width: 100%;
          height: 74px;
          background: url(./images/list_bg.png) no-repeat;
          background-size: 100% 100%;
          position: relative;
          h3.title {
            color: #fff;
            position: absolute;
            top: -4px;
            left: 60px;
            font-size: 12px;
            font-weight: bold;
            font-style: italic;
          }
          .left {
            width: 66px;
            height: 66px;
            position: absolute;
            top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: url(./images/bg.png) no-repeat;
            background-size: contain;
            strong {
              color: #fff;
              font-size: 13px;
              line-height: 13px;
            }
          }
          .right {
            .dataListItem1, .dataListItem2 {
              width: calc(100% - 70px);
              height: 22px;
              padding-left: 14px;
              display: flex;
              align-items: center;
              position: absolute;
              left: 60px;
              top: 20px;
              background: url(./images/list_bg1.png) no-repeat;
              background-size: contain;
              p {
                width: 56px;
                font-size: 11px;
                color: #B4DFFF;
                margin-right: 8px;
              }
              h3 {
                font-size: 11px;
                color: #B4DFFF;
                margin-left: 8px;
              }
            }
            .dataListItem2 {
              position: absolute;
              top: 45px;
              background: url(./images/list_bg2.png) no-repeat;
              background-size: contain;
              ::v-deep(.line1) {
                background: linear-gradient(270deg, #51FBFF 0.01%, #23DF7B 60.51%, rgba(6, 183, 253, 0) 112.8%);
              }
              ::v-deep(.line2) {
                background: linear-gradient(270deg, #00E3E5 0.01%, #15CE6B 60.51%, rgba(9, 169, 232, 0) 112.8%);
              }
            }
          }
        }
      }
    }
  }
</style>
